<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #can {
      width: 500px;
      height: 400px;
      border: 1px solid;
      box-sizing: border-box;
    }
  </style>
  <body>
    <canvas id="can" width="500" height="400"></canvas>
    <script>
      var canvas = document.getElementById('can');
      // console.log(canvas);
      var ctx = canvas.getContext('2d');

      // ctx.moveTo(100, 100);
      // ctx.lineTo(200, 100);
      // ctx.lineTo(200, 200);
      // ctx.stroke();
      // console.log(ctx);
      // ctx.closePath();

      // ctx.beginPath();
      // ctx.moveTo(300, 100);
      // ctx.lineTo(300, 200);
      // ctx.lineTo(200, 100);
      // ctx.stroke();
      // ctx.fill();

      // ctx.fillRect(100, 100, 200, 100);
      ctx.strokeRect(100, 100, 200, 100);
    </script>
  </body>
</html>
